<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<style type="text/css">
		* {
			padding: 0px;
			margin: 0px;
			box-sizing: border-box;
		}
		body{
			background-image: url(img/360153c4b20304a5182a2f95f90f27e1.jpg);
			background-size: cover;
		}
		#div1 {
			width: 300px;
			height: 300px;
			border: 1px solid;
			background-size: contain;
			background-repeat: no-repeat;
			font-size: 40px;
			text-align: center;
			line-height: 300px;
			/*background-color: white;*/
			color: white;
			font-weight: bold;
		}
		#div2{
			margin: 0px auto;
			position: absolute;
			top: 0px;
			left: 500px;
		}
		
		#div2 div {
			border: 1px solid white;
			float: left;
		}
		#div3{
			height: 100px;
			width: 200px;
			border: 1px solid;
			position: absolute;
			top: 100px;
			left: 50px;
			background-color: red;
			text-align: center;
			line-height: 100px;
			color: white;
			font-size: 18px;
			font-weight: bold;
			border-radius: 15px;
			display: none;
		}
		
	</style>

	<body>
		<div id="div1">
			请放入一张图片
		</div>
		<div id="div2">

		</div>
		<div id="div3" onclick="xiaguan()">
			闯关成功点击下一关？
		</div>
	</body>
	<script type="text/javascript">
		var div1 = document.getElementById("div1");
		var strnum;
		var num;
		var dragDiv
		var index = 0;
		var zq = [];
		var arr = [];
		var bjtp;
		div1.ondragenter = function() {
			return false
		}
		div1.ondragover = function() {
			return false
		}
		div1.ondrop = function(e) {
			e.stopPropagation();
			e.preventDefault();
			var fil = e.dataTransfer.files;
			var file = new FileReader();
			file.onload = function(e) {
				strnum=3;
				num = strnum * strnum;
				div1.innerHTML = ""
				var img = document.createElement("img");
				img.src = e.target.result;
				w = img.width;
				console.log(w);
				h = img.height;
				div1.appendChild(img);
				img.style.display = "none";
				div1.style.backgroundImage = "url(" + e.target.result + ")"
				
				bjtp = e.target.result
				kaiShi(bjtp);
			}
			file.readAsDataURL(fil[0]);
		};
		var w;
		var h;
		function kaiShi(bj) {
//			console.log(w);
			var div2 = document.getElementById("div2");
			div2.innerHTML=""
			div2.style.height = h + "px";
			div2.style.width = w + "px";
			for(var i = 0; i < num; i++) {
				var div = document.createElement("div");
				div.style.height = h / strnum + "px";
				div.style.width = w / strnum + "px";
				div.style.backgroundImage = "url(" + bj + ")"
				div2.appendChild(div);
			};
			bjj();
			arr = arr.sort(function(x, y) {
				return Math.random() > 0.5 ? 1 : -1;
			});
            for(var index=0;index<num;index++){
			div2.children[index].style.backgroundPositionY = arr[index].y;
			div2.children[index].style.backgroundPositionX = arr[index].x;
			div2.children[index].setAttribute("sum", index);
			div2.children[index].draggable = "true"//谷歌实现DIV拖动
			
			div2.children[index].ondragstart = function(e) {
				dragDiv = e.target;
				e.dataTransfer.setData("text",e.target.ID);//火狐实现DIV拖动
				
//				e.preventDefault();
			};
			div2.children[index].ondragenter = function() {
				return false;
			};
			div2.children[index].ondragover = function() {
				return false;
			};
			div2.children[index].ondrop = function(e) {
				e.stopPropagation();
				e.preventDefault();
				var luos = e.target.getAttribute("sum");
				var luoy = parseInt(e.target.style.backgroundPositionY);
				var luox = parseInt(e.target.style.backgroundPositionX);
				var yis = dragDiv.getAttribute("sum");
				var yiy = parseInt(dragDiv.style.backgroundPositionY);
				var yix = parseInt(dragDiv.style.backgroundPositionX);

				if(Math.abs(yis - luos) == 1 || Math.abs(yis - luos) == strnum) {
					e.target.style.backgroundPositionY = yiy + "px";
					e.target.style.backgroundPositionX = yix + "px";
					dragDiv.style.backgroundPositionY = luoy + "px";
					dragDiv.style.backgroundPositionX = luox + "px";
				};
				yanZheng();
			};
            };
		};
        
		function bjj() {
			zq = [];
		    arr = [];
			for(var k = 0; k < strnum; k++) {
				zq[k] = [];
				for(var l = 0; l < strnum; l++) {
					var divh = (-k * (h / strnum)) + "px";
					var divw = (-l * (w / strnum)) + "px"
					zq[k][l] = {
						x: divw,
						y: divh
					};
					//					console.log(zq)
					arr.push({
						x: divw,
						y: divh
					});
//		            console.log(arr);
				};
			};

		};

		function yanZheng() {
			var num2 = 0;
			var num1 = 0;
			for(var i = 0; i < strnum; i++) {
				for(var k = 0; k < strnum; k++) {
					var divx = parseInt(div2.children[num2].style.backgroundPositionX);
					var divy = parseInt(div2.children[num2].style.backgroundPositionY);
					var zqx = parseInt(zq[i][k].x);
					var zqy = parseInt(zq[i][k].y);
					if(zqx == divx && zqy == divy) {
						num1++
					};
					num2++;
					if(num1 == num) {
//						console.log("yan"+num);
						document.getElementById("div3").style.display = "block";
						return;
					};
				};
			};
		};
		
		function xiaguan(){
			document.getElementById("div3").style.display = "none";
			strnum++;
			num = strnum * strnum;
//			console.log("xia"+strnum)
//			console.log("xia"+num)
            kaiShi(bjtp);
            bjj();
            yanZheng();
		};
	</script>

</html>